<template>
  <div class="form-container">
    <el-tabs type="border-card">
      <el-form :label-position="labelPosition" label-width="80px" :model="formData1" :inline="true" class="demo-form-inline head-form" >
        <el-row type="flex" class="row-bg">
          <el-col :span="6">
            <el-form-item label="单证编码" size="mini">
              <el-select v-model="formData1.certifyCode" clearable filterable placeholder="请选择">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单证名称" size="mini">
              <el-input v-model="formData1.certifyName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单证版本" size="mini">
              <el-select v-model="formData1.certifyEdition" clearable filterable placeholder="请选择">
                <el-option
                  v-for="item in certifyOperTypeList"
                  :key="item.code"
                  :label="item.codeName"
                  :value="item.code">
                  <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单证类型" size="mini">
              <el-select v-model="formData1.certifyOperType" clearable filterable placeholder="请选择">
                <el-option
                  v-for="item in certifyOperTypeList"
                  :key="item.code"
                  :label="item.codeName"
                  :value="item.code">
                  <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
            <el-form-item>
              <el-button type="primary" @click="query" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="dialogFormVisible = true">定义</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="deleted" icon="el-icon-delete" size="small">删除</el-button>
            </el-form-item>
        </el-row>
      </el-form>
      <el-table :data="certifysList" ref="table" @selection-change="handleSelectionChange" style="width: 100%"
                class='table-common' :highlight-current-row="true" border stripe  :height="tableHeight"
                v-show="isShowSingles">
        <el-table-column label="#" checked="selectionData"
                         type="selection"
                         min-width="6%">
        </el-table-column>
        <el-table-column label="序号" type='index' min-width="10%" align="center"></el-table-column>
        <el-table-column prop="certifyCode" label="单证编码" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="certifyName" label="单证名称" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="certifyEdition" label="单证版本" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="certifyType" label="单证类型" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="certifyOperType" label="单证业务类型" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="haveNumber" label="是否有号单证" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="useManageCom" label="使用部门" min-width="8%" align="center"></el-table-column>
        <el-table-column label="操作" min-width="14%" align="center">
          <template slot-scope="scope">
            <el-button type="primary"
                       icon="el-icon-view"
                       @click="dialogFormVisible1 = true,formData.disable=true,dialogTitle='修改'"
                       size="mini">详情
            </el-button>
            <el-button type="primary"
                       icon="el-icon-edit-outline"
                       @click="dialogFormVisible2 = true"
                       size="mini">修改
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="mar15 " align="right" v-show="isShowSingles">
        <el-pagination
          @current-change="handleCurrentChangeSingle"
          :current-page="selfPage.currentPage"
          :page-size="selfPage.perPage"
          layout="total, prev, pager, next, jumper"
          :total="selfPage.totalSize">
        </el-pagination>
      </div>
    </el-tabs>
    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" center :visible.sync="dialogFormVisible" class="menu-dialog" :title="dialogTitle+'单证'">
      <editForm ref="editForm" :infoForm="formData" style="width: 100%" @submit="submit" @closeWin="closeWin"></editForm>
    </el-dialog>

  </div>


</template>

<script>

  import editForm from './edit'

  export default {
    name: "card-define",
    data() {
      return {
        tableHeight: document.body.clientHeight - 245,
        certifyEdition: 202101,
        isShowSingles: true,
        showType: false,
        labelPosition: "right",
        dialogFormVisible: false,
        dialogTitle:"添加",

        formData: {
          certifyOperType1: '',
          certifyCode: '010201',
          certifyEdition: 202101,
          certifyName: '补充文件',
          manageCom: '',
          userManageCom: '1',
          certifyType: '有价单证',
          certifyOperType: '契约',
          haveNumber: '是',
          haveNumber1: '',
          state: '1',
          state1: '',
          checked1: '',
          checkedType1: '',
          checked2: '',
          checkedType2: '',
          haveLimit: '2',
          haveLimit1: '',
          maxUnit1: '',
          maxUnit2: '',
          certifyLength: '6',
          certifyLength1: '',
          tackBackFlag: '1',
          tackBackFlag1: '',
          haveValidate: '1',
          haveValidate1: '',
          validate1: '30',
          validate2: '70',
          validate3: '',
          validate4: '',
          certifyPrice: '0.2',
          certifyPrice1: '',
          cartonSize: '25',
          bindingSize: '25',
          cartonSize1: '',
          bindingSize1: '',
          useTheChannel: '2',
          useTheChannel1: '',
          certifyStock: '',
          certifyStockxiugai: '5',
          startNo: '',
          handOut: '1',
          handOut1: '',
        },
        stateList: [
          {code: '1', codeName: '启用'},
          {code: '2', codeName: '停用'}
        ],
        useManageComList: [
          {code: '1', codeName: '财务部'},
          {code: '2', codeName: '业务部'}
        ],
        useManageComList1: [
          {code: '1', codeName: '总部'},
          {code: '2', codeName: '分部'},
          {code: '3', codeName: '支部'},
          {code: '4', codeName: '营销部'},
        ],
        certifyOperTypeList: [{code: '1', codeName: '契约'}, {code: '2', codeName: '保全'}, {code: '3', codeName: '理赔'}],
        certifyTypeList: [{code: '1', codeName: '有价单证'}],
        isChecked: [{code: '1', codeName: '是'}, {code: '2', codeName: '否'}],
        channelList: [{code: '1', codeName: '个人'}, {code: '2', codeName: '团体'}, {code: '3', codeName: '银行'}, {
          code: '4',
          codeName: '中介'
        }, {code: '5', codeName: '网销'}],
        checkedTypeList1: [{code: '1', codeName: '分公司 -> 总公司'}],
        checkedTypeList2: [{code: '1', codeName: '支公司 -> 分公司 -> 总公司'}, {code: '2', codeName: '分公司 -> 总公司'}],

        formData1: {
          certifyCode: '',
          certifyName: '',
          certifyType: '',
          certifyOperType: '',
        },
        code2: {},
        selfPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        certifysList: [
          {
            certifyCode: '010201',
            certifyEdition: 202101,
            certifyName: '补充文件',
            certifyType: '有价单证',
            certifyOperType: '契约',
            haveNumber: '是',
            useManageCom: '财务部'
          },
          {
            certifyCode: '010202',
            certifyEdition: 202101,
            certifyName: '财务补充文件',
            certifyType: '有价单证',
            certifyOperType: '契约',
            haveNumber: '是',
            useManageCom: '财务部'
          },
        ],
        handOutList: [
          {code: '1', codeName: '总公司->分公司->支公司->营业部->代理人'},
          {code: '2', codeName: '总公司->分公司->业务部门->代理人'},
          {code: '3', codeName: '总公司->业务部门->代理人'},
          {code: '4', codeName: '总公司->业务部门-分公司业务部门->代理人'},
        ]
      }
    },
    components: {editForm},
    methods: {
      isShow(val) {
        this[val] = !this[val]
      },
      handleSelectionChange(val) {
        this.selectionData = val;
      },
      handleCurrentChangeSingle(num) {
        this.selfFormData.pageNum = num
      },
      showCheckedType1() {
        if (this.formData.checked1 === '2') {
          this.showType1 = false;
          this.$refs.checkedType1.style.display = 'none'
        }
        this.showType1 = true;
        this.$refs.checkedType1.style.display = 'block'
      },
      showCheckedType2() {
        if (this.formData.checked2 === '2') {
          this.showType2 = false;
          this.$refs.checkedType2.style.display = 'none'
        }
        this.showType2 = true;
        this.$refs.checkedType2.style.display = 'block'
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      add() {
      },
      query(){},
      deleted(){},
      submit(){},
      closeWin() {
        console.log("关闭")
        // 调用初始化表单方法
        //this.initInfoForm()
        // 设置弹窗不可见
        this.dialogFormVisible = false
      },
    }
  }
</script>

<style scoped>
  @import "/../../../styles/common.scss";
</style>
